/*
 * @Author: Zhang Kai
 * @Date: 2022-03-07 16:49:33
 * @LastEditors: mayijun
 * @LastEditTime: 2022-07-21 18:09:25
 * @FilePath: /metricsx-standard-ui/src/views/indexlib/components/changeReacord/index.tsx
 */
import API from '@/services';
import { defineComponent, onMounted, PropType, reactive, toRefs } from 'vue';
import './index.scss';

const Chagnereacord = defineComponent({
  name: 'Chagnereacord',
  props: {
    id: {
      type: String as PropType<string>
    }
  },
  setup: (props) => {
    const state: any = reactive({
      // 变更类型
      CHANGETYPE: {
        CREATE: '创建指标',
        REVISE: '信息修改',
        DELETE: '删除指标',
        PUBLISH: '发布指标',
        OFFLINE: '下线指标'
      },
      loading: false,
      activities: [] as defs.MetricsChangeLogVO[]
    });
    const getTimelineData = async (id: any) => {
      state.loading = true;
      const { code, data }: any = await API.metricsChangeLog.getById({ id });
      if (code === 200 && data) {
        state.activities = data;
      }
      state.loading = false;
    };
    onMounted(() => {
      getTimelineData(props.id);
    });
    return () => {
      return (
        <div class="chagne-reacord-wrap" v-loading={state.loading}>
          <el-timeline class="change-timestamp">
            {state.activities.map((activity: any, index: number) => (
              <el-timeline-item
                hide-timestamp
                color={index === 0 ? '#3C6EFF' : '#E8EBF2'}
              >
                <div class="time-line">{activity.createTime}</div>
                {activity.changeType && (
                  <div class="change-title">
                    {state.CHANGETYPE[activity.changeType.toUpperCase()]}
                  </div>
                )}
                <div class="operator-info">
                  {activity.createBy ? `操作人员：${activity.createBy}` : null}
                </div>
                {activity.content && (
                  <div class="timeline-content-wrap">{activity.content}</div>
                )}
              </el-timeline-item>
            ))}
          </el-timeline>
        </div>
      );
    };
  }
});

export default Chagnereacord;
